<template>
  <div>
    <el-card class="box-card">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="请查询：">
          <!-- <el-input placeholder="审批人"></el-input> -->
          <el-input v-model="query" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryusers">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 表单组件 -->
    <el-table :data="tableData" style="width: 100%" stripe>
      <el-table-column label="Id">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <!-- 添加序号 -->
          <span style="margin-left: 10px">{{ scope.$index + lastId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户名">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否启用">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.isActived }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.createdTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="备注">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.remarks }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="warning"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 增添修改的模态框 -->
    <el-dialog title="用户信息" :visible.sync="dialogFormVisible">
      <el-form :model="formData">
        <el-form-item label="用户名" label-width="120px">
          <el-input v-model="formData.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" label-width="120px">
          <el-input v-model="formData.remarks" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页组件 -->
    <div class="block">
      <el-pagination
        :current-page="pager.pagerIndex"
        :page-size="pager.pagerSize"
        :page-sizes="[5, 10, 15, 20, 50]"
        hide-on-single-page
        layout="prev, pager, next, jumper,sizes, total"
        :total="pager.rowsTotal"
        @current-change="handlePageIndexChange"
        @size-change="handlePageSizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { deleteUsers, getList, addUser, modUser,query } from "../api/users";
export default {
  data() {
    return {
      tableData: [],
      pager: {
        pageIndex: 1, // 页码
        pageSize: 10, // 页面大小（每页项目的数量）
        rowsTotal: 30, // 总记录数
      },
      formData: {
        id: 0,
        username: "",
        password: "113",
        remarks: "",
      },
      currentIndex: 0,
      dialogFormVisible: false,
      lastId: {
        type: Number,
        defualt: 1,
      },
      query: "",
      isQuery:false
    };
  },
  methods: {
    //找到前一页最后一个
    fildlastId() {
      var lastId = (this.pager.pageIndex - 1) * this.pager.pageSize + 1;
      // console.log(lastId);
      this.lastId = lastId;
    },
    // 编辑
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.formData.id = row.id;
      this.formData.username = row.username;
      this.formData.remarks = row.remarks;
      this.currentIndex = index;
      console.log(this.formData.id);
      // console.log(index, row);
    },
    // 新增
    handleAdd() {
      this.dialogFormVisible = true;
      this.formData.id = 0;
      // console.log(this.formData.id);
    },
    // 取消
    handleCancel() {
      this.dialogFormVisible = false;
    },
    // 确定
    handleSave() {
      this.dialogFormVisible = false;
      //新增
      if (this.formData.id === 0) {
        addUser(this.formData).then(({ data }) => {
          console.log(data);
          // 刷新
          // this.tableData.push(data.data)

          // var a=this.pager.pageIndex=this.pager.rowsTotal+1;
          //点击确定后跳转到新增页面
          var pagecount =
            parseInt(this.pager.rowsTotal / this.pager.pageSize) + 1;
          this.handlePageIndexChange(pagecount);
        });
      } else {
        // 修改
        modUser(this.formData.id, this.formData).then(({ data }) => {
          this.tableData.splice(this.currentIndex, 1, data.data);
          console.log(data);
          // this.formData.id=0;
        });
      }
      console.log(this.formData);
    },
    // 删除
    handleDelete(index, row) {
      deleteUsers(row.id)
        .then(() => {
          this.pager.rowsTotal = this.pager.rowsTotal - 1;
          this.fetchData(this.pager);
          // 删除上一页最后一个刷新
          let a = this.pager.rowsTotal % this.pager.pageSize;
          if (a == 0) {
            this.$router.go(0);
          }
        })
        .catch((err) => {
          console.log(err);
        });

      // this.$router.go(0);
    },
    // 改变页码后，重新拉取数据
    handlePageIndexChange(val) {
      console.log(val);
      this.pager.pageIndex = val;
      this.fetchData(this.pager);
      this.fildlastId();
    },
    // 改变页大小后，重新拉取数据
    handlePageSizeChange(val) {
      this.pager.pageSize = val;
      this.fetchData(this.pager);
      this.fildlastId();
    },
    // 拉取数据方法
    fetchData(pager) {
      if(this.isQuery){
        query(pager).then(({data})=>{
          console.log(data);
          let res = data.data;
          this.tableData = res.data;
          this.pager = res.pager;
        }).catch((err)=>{
          console.log(err);
        })
      }else{
        getList(pager)
        .then(({ data }) => {
          // console.log(data);
          let res = data.data;
          this.tableData = res.data;
          this.pager = res.pager;
        })
        .catch((err) => {
          console.log(err);
        });
      }
      
    },

    //查询
    queryusers() {
      this.pager.pageIndex=1;
      var QueryData = {};
      QueryData = this.pager;
      QueryData.query = this.query;
      console.log(this.pager);
      console.log(this.query);
      this.isQuery = true;
      this.fetchData(QueryData);

      // this.tableData.forEach(item=>{
      //   var query=this.query;
      //   // console.log(query);
      //   let a=item.username;
      //   if(query===a){
      //     console.log(a);
      //   }
      // })
    }
  },
  mounted() {
    this.fetchData(this.pager);
    this.fildlastId();
    // getbyId(1).then(({data})=>{
    //   console.log(data);
    // }).catch(err=>{
    //   console.log(err);
    // }),
    // deleteUsers(9).then(({data})=>{
    //   console.log(data);
    // }).catch(err=>{
    //   console.log(err);
    // })
  },
};
</script>

<style>
</style>








